<template>
  <Modal 
    v-model:open="visible"
    title="API Configuration"
    class="config-modal"
    :width="600"
    @ok="saveConfig"
    @cancel="resetConfig"
  >
    <div class="config-form">
      <div class="form-item">
        <label class="matrix-label">API Base URL:</label>
        <Input 
          v-model:value="localConfig.baseUrl"
          placeholder="e.g.: http://localhost:3001/v1"
          class="matrix-input"
        />
      </div>
      
      <div class="form-item">
        <label class="matrix-label">API Token:</label>
        <Input.Password 
          v-model:value="localConfig.apiToken"
          placeholder="Enter your API Token"
          class="matrix-input"
        />
      </div>
      
      <div class="form-item">
        <label class="matrix-label">Model List URL:</label>
        <Input 
          v-model:value="localConfig.modelListUrl"
          placeholder="e.g.: /models"
          class="matrix-input"
        />
      </div>
      
      <div class="form-item">
        <label class="matrix-label">System Prompt:</label>
        <Input.TextArea 
          v-model:value="localConfig.systemPrompt"
          placeholder="Enter system prompt for the AI..."
          class="matrix-input"
          :rows="3"
        />
      </div>
      
      <div class="config-tips">
        <h4>💡 Configuration Guide:</h4>
        <ul>
          <li>API Base URL: Base address of the LLM service</li>
          <li>API Token: Authentication key for API access</li>
          <li>Model List URL: Endpoint path to fetch available models</li>
          <li>System Prompt: Default instructions for the AI assistant</li>
          <li>Configuration will be saved locally in browser</li>
        </ul>
      </div>
    </div>
  </Modal>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Modal, Input, message } from 'ant-design-vue'
import { updateApiConfig } from '../services/apiService.js'
import { DEFAULT_SYSTEM_PROMPT } from '../prompt/prompt.js'


const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  config: {
    type: Object,
    default: () => ({
      baseUrl: 'http://localhost:3001/v1',
      apiToken: '9643f8c461f85e668198ec406e476d0bae85cf4d',
      modelListUrl: '/models',
      systemPrompt: DEFAULT_SYSTEM_PROMPT
    })
  }
})

const emit = defineEmits(['update:modelValue', 'configUpdated'])

const visible = ref(false)
const localConfig = ref({
  baseUrl: '',
  apiToken: '',
  modelListUrl: '',
  systemPrompt: ''
})

// 监听显示状态
watch(() => props.modelValue, (newVal) => {
  visible.value = newVal
  if (newVal) {
    // 打开时重置为当前配置
    localConfig.value = { ...props.config }
  }
})

watch(visible, (newVal) => {
  emit('update:modelValue', newVal)
})

// Save configuration
const saveConfig = () => {
  if (!localConfig.value.baseUrl.trim()) {
    message.error('Please enter API Base URL')
    return
  }
  
  if (!localConfig.value.apiToken.trim()) {
    message.error('Please enter API Token')
    return
  }
  
  try {
    // Update API configuration
    updateApiConfig({
      baseUrl: localConfig.value.baseUrl,
      apiToken: localConfig.value.apiToken
    })
    
    // Save to local storage
    localStorage.setItem('ernieWebCoder_config', JSON.stringify(localConfig.value))
    
    // Notify parent component
    emit('configUpdated', { ...localConfig.value })
    
    message.success('Configuration saved successfully')
    visible.value = false
  } catch (error) {
    console.error('Failed to save configuration:', error)
    message.error('Failed to save configuration')
  }
}

// Reset configuration
const resetConfig = () => {
  localConfig.value = { ...props.config }
  visible.value = false
}

// Load configuration from local storage
const loadConfig = () => {
  try {
    const saved = localStorage.getItem('ernieWebCoder_config')
    if (saved) {
      const config = JSON.parse(saved)
      return config
    }
  } catch (error) {
    console.error('Failed to load configuration:', error)
  }
  return null
}

// Export methods for parent component
defineExpose({
  loadConfig
})
</script>

<style scoped>
.config-modal :deep(.ant-modal-content) {
  background: rgba(0, 20, 0, 0.95);
  border: 1px solid #00ff00;
}

.config-modal :deep(.ant-modal-header) {
  background: rgba(0, 50, 0, 0.8);
  border-bottom: 1px solid #00ff00;
}

.config-modal :deep(.ant-modal-title) {
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  text-shadow: 0 0 10px #00ff00;
}

.config-modal :deep(.ant-modal-footer) {
  background: rgba(0, 20, 0, 0.8);
  border-top: 1px solid #00ff00;
}

.config-modal :deep(.ant-btn-primary) {
  background: #00ff00 !important;
  border-color: #00ff00 !important;
  color: #000 !important;
  font-weight: bold;
}

.config-modal :deep(.ant-btn-primary:hover) {
  background: #00cc00 !important;
  border-color: #00cc00 !important;
  box-shadow: 0 0 15px #00ff00;
}

.config-modal :deep(.ant-btn-default) {
  background: rgba(0, 0, 0, 0.8) !important;
  border-color: #00ff00 !important;
  color: #00ff00 !important;
}

.config-form {
  padding: 20px 0;
}

.form-item {
  margin-bottom: 20px;
}

.matrix-label {
  display: block;
  color: #00ff00;
  font-weight: bold;
  margin-bottom: 8px;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 5px #00ff00;
}

.matrix-input :deep(.ant-input) {
  background: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid #00ff00 !important;
  color: #00ff00 !important;
  font-family: 'Courier New', monospace;
}

.matrix-input :deep(.ant-input:focus) {
  border-color: #00ff00 !important;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.3) !important;
}

.matrix-input :deep(.ant-input::placeholder) {
  color: rgba(0, 255, 0, 0.5) !important;
}

.matrix-input :deep(.ant-input-password-icon) {
  color: #00ff00 !important;
}

.config-tips {
  margin-top: 30px;
  padding: 15px;
  background: rgba(0, 50, 0, 0.3);
  border: 1px solid #00ff00;
  border-radius: 8px;
}

.config-tips h4 {
  color: #00ff00;
  margin-bottom: 10px;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 5px #00ff00;
}

.config-tips ul {
  color: #00ff00;
  margin: 0;
  padding-left: 20px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}

.config-tips li {
  margin-bottom: 5px;
  opacity: 0.8;
}
</style>